<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript学习</title>
    <link rel="stylesheet" href="./assets/css/amazeui.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2038369_innne5f7am.css">
    <style>
        #notice{
            height: 15px;
            line-height: 15px;
        }
        #mode1{
            margin-top: 10px;
            background-color: aquamarine;
            border: 2px solid salmon;
            display: block;
        }
        #otherbanner{
            height: 470px;
            width: 590px;
            margin-bottom: 50px;
            position: relative;
        }
        #otherbanner #ima{
            height: 470px;
            width: 590px;
            display: block;
            margin: 50px;
        }
        #otherbanner .iconfont{
            margin-left: 5px;
            color: #968c8c;
            font-size: 25px;
            font-weight: bold;
            display: inline-block;
        }
        #otherbanner #slide{
            height: 15px;
            width: 250px;
            position: absolute;
            bottom: 20px;
            left: 50px;
        }
        #otherbanner #slide .focuson{
            color: rgb(248, 144, 7);
        }

        #floatarea{
            width: 1050px;
            height: 550px;
            margin-bottom: 50px;
            position: relative;
            background-color: aquamarine;
        }
        #floatarea #floatblock{
            display: block;
            height: 50px;
            width: 50px;
            position: absolute;
        }

        
    </style>
    <script src="./js/jquery-3.4.1.js"></script>
    <!-- <script>
        alert('JQuery.');
    </script> -->
</head>
<body>
    <button type="button" class="am-btn am-btn-default">默认样式</button>
    <button type="button" class="am-btn am-btn-primary">主色按钮</button>
    <button type="button" class="am-btn am-btn-secondary">次色按钮</button>
    <button type="button" class="am-btn am-btn-success">绿色按钮</button>
    <button type="button" class="am-btn am-btn-warning">橙色按钮</button>
    <button type="button" class="am-btn am-btn-danger">红色按钮</button>
    <a class="am-btn am-btn-link">链接</a>
    <a class="am-btn am-btn-danger" href="http://www.bing.com" target="_blank">应用按钮样式的链接</a>
    <div id="inp">
        <input type="text" id="user" value="admin" onfocus="focuson()" onblur="leave()">
        <p id="notice"></p>
    </div>
    <input type="button" id="btn" value="执行" onclick="demo()">
    <input type="button" id="btn" value="弹窗" onclick="show();">
    <input type="button" id="btn" value="关闭" onclick="clearup();">
    <div id="mode1">
        <span onclick="hid(this);">关闭</span>
        <div class="mode2">mode2</div>
        <p>我是p元素</p>
    </div>
    <div id="mode3">
        <ul>
            <li>boss1</li>
            <li style="color:#f00;">boss2</li>
            <li>boss3</li>
            <li>boss4</li>
            <li style="color:#f00;">boss5</li>
            <li>boss6</li>
        </ul>
    </div>
    <div class="clock">
        <input id="txt" type="text">
        <input type="button" value="启动" onclick="run();">
    </div>
    <div id="otherbanner">
        <img id="ima" src="./images/banner0.jpg.webp" alt="">
        <div id="slide">
            <i class="iconfont icon-yuandian"></i>
            <i class="iconfont icon-yuandian"></i>
            <i class="iconfont icon-yuandian"></i>
            <i class="iconfont icon-yuandian"></i>
            <i class="iconfont icon-yuandian"></i>
        </div>
    </div>
    <!-- 漂浮广告 -->
    <div id="floatarea">
        <img id="floatblock" src="./images/AcFun.jpg" alt="">
    </div>
    
    
</body>
<script>
    var box = document.getElementById("float_box"); //漂浮对象所在的父元素
    var obj = document.getElementById("float_obj"); //漂浮对象
    var x = 500;  // 图片所在的初始位置
    var xin = true; //确定元素在body内部
    var step = 1; //每次移动的像素
    var delay = 10; //延时时间
    // 漂浮函数
    function float(){
        var L = 0; //左边边界
        // 可移动宽度=body宽度 - 元素自身宽度
        var maxW = box.offsetWidth - obj.offsetWidth;
        x = x + step*(xin ? 1 : -1); //在body内部+， 在body外部-
        if(x < L){
            xin = true;
            x = L;
        };//x小于左边边界，改变xin，初始化x
        if(x > maxW){
            xin = false;
            x = maxW;
        };//x大于可移动的最大宽度，改变xin，初始化x
        //判断水平位置
        
        // 改变元素的位置，元素使用的绝对定位
        // console.log(x);
        obj.style.marginLeft = x + "px";
    }
    var t = setInterval("float()", delay);
    obj.onmouseover = function(){clearInterval(t);};
    obj.onmouseout = function(){t = setInterval("float()",delay)};

    // 老师的方法
    var t;
    var num = 0;
    // console.log($("#otherbanner #slide").find('i').length - 1);
    function run(){        
        if(num > ($("#otherbanner #slide").find('i').length - 1)){
            clearTimeout(t);
            num = 0; 
        }
        $("#otherbanner #slide").find('i').eq(num-1).removeClass("focuson");
        $("#otherbanner #slide").find('i').eq(num).addClass("focuson");
        $("#otherbanner #ima").prop("src","./images/banner"+ num +".jpg.webp");
        ++num;
        t = setTimeout("run();",1500);
    }
    function mouseHandle(){
        $("#ima").mouseenter(function(){
            clearTimeout(t);
        }).mouseleave(function(){
            run();
        })
    }
    run();
    mouseHandle();

    var t;         //横向计时器
    var len = 200;  //每次横向变化的长度
    var verl = 100;  //每次纵向变化的高度
    var le = 0;     //left的距离
    var tlen = 0;   //top的距离
    function move(){
        if(((le < 0)||(le > ($("#floatarea").width() - $("#floatblock").width())))&&((tlen < 0)||(tlen > ($("#floatarea").height() - $("#floatblock").height())))){
            clearInterval(t);
        }
        else{
            while((le < ($("#floatarea").width() - $("#floatblock").width()))&&((tlen < ($("#floatarea").height() - $("#floatblock").height())))){
                le = le + len;
                $("#floatblock").css("position","absolute").animate({left:le+"px"},800);    
                tlen = tlen + verl;
                $("#floatblock").css("position","absolute").animate({top:tlen+"px"},800);            
            }
            while((le > 0)&&(tlen > 0)){
                le = le - len;
                $("#floatblock").css("position","absolute").animate({left:le+"px"},800);
                tlen = tlen - verl;
                $("#floatblock").css("position","absolute").animate({top:tlen+"px"},800);
            }
        }
        t = setInterval("move();",.1);
    }
    move();
    // var t;
    // var num = 10;
    // function run(){
    //     if(num<0){
    //         clearTimeout(t);
    //         num = 10;
    //         return false;
    //     }
    //     $('#txt').val(num);
    //     --num;
    //     t = setTimeout("run()",1000);
    // }

    // t = setInterval(function(){
    //     if(num < 0){
    //         clearInterval(t);
    //         num = 10;
    //         return false;
    //     }
    //     $("#txt").val(num);
    //     --num;
    // }, 1000);

    function show(){
        // $('#mode1').css("display","block");
        // $('#mode1').show();
        // $('#mode1').slideDown(1000);
        // $('#mode1').fadeIn(1000);
        // $('#mode1').animate({opacity:"1"},2000,function(){
        // $('#mode1').css("display","block");
        // });
        $('#mode1').css('position','relative').animate({left:"200px"},2000);
    }
    function clearup(){
        // $('#mode1').css("display","none");
        // $('#mode1').hide();
        // $('#mode1').slideUp(1000);
        // $('#mode1').fadeOut(1000);
        // $('#mode1').animate({opacity:".1"},2000,function(){
        //     $('#mode1').css("display","none");
        // });
        $('#mode1').css('position','relative').animate({left:"0px"},2000);
    }
    function hid(e){
        $(e).parent().css("display","none");
    }
    function demo(){
        // window.alert('ok');
        // window.console.log('success!');
        // console.log(window.location.hostname);
        // console.log(window.location.href);
        // console.log(window.location.search);
        // console.log(window.location);
        
        // 用于页面跳转
        // window.location.href="http://www.baidu.com";
        
        // 后退页面
        // window.history.back();
        // window.history.go(-1);
        // console.log(window.history);
        
        // 获取元素对象
        // var obj = document.getElementById("mode1");   
        // obj.value="CrazyChen";
        // obj.innerHTML=`<span style="color: skyblue; fontweight: bold;">城南以南城北以北<span>`;
        // obj.innerText="mode1 has changed.";
        // obj.innerText="";
        // value取元素内的value值 
        // alert(obj.value);
        // innerHTML取带格式的文本
        // alert(obj.innerHTML);
        // innerText取纯文本值
        // alert(obj.innerText);

        // var str="admin";
        // var array=[['boss1','boss2','boss3'],['user1','user2','user3'],['admin1','admin2','admin3']];
        // console.log(array[2][2]); //显示admin3

        // 遍历一维数组
        // var rows = ['user1','user2','user3'];
        // rows.push('user00');
        // rows.pop();
        // rows.unshift('wuwuwu');
        // console.log(str.length);
        // for(var i=0; i<rows.length; i++){
        //     console.log(rows[i]);
        // }

        // 遍历二维数组
        // for(var i=0; i<array.length; i++){
        //     for(var j=0; j<array[i].length; j++){
        //         console.log(array[i][j]);
        //     }
        // }
        
        // console.log($("#user").val());
        // console.log($('#mode1').html());
        // console.log($('#mode1').text("Hello oooo"));
        // console.log($('#mode3 ul').find('li').text()); //取得ul中所有元素值
        // console.log($('#mode3 ul').find('li').eq(2).text()); //取得li中索引为2的元素boss3
        // console.log($('ul').find('li').siblings().parent().html());   //.siblings()所有的兄弟元素 .parent()父元素

        // $('#mode1').css("background-color","skyblue"); //为元素添加单个样式
        // $('#mode1').addClass('add').removeClass('add'); //.addClass()为元素添加一个类选择器样式 .removeClass()为元素去除类选择器样式
    }
    // function focuson(){        
    //     console.log("focus.");
    // }
    // function leave(){
    //     var obj = document.getElementById('inp');
    //     obj.innerHTML=`<input type="text" id="user" value="admin" onfocus="focuson()" onblur="leave()">
    //     <p id="notice">!请输入用户名</p>`;
    //     console.log("blur.");
    // }
    // demo();
</script>
</html>